<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!-- saved from url=(0017)http://localhost/ -->
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Index of /</title>
</head>

<body>
  <h1>Index of /</h1>
  <table>
    <tbody>
      <tr>
        <th valign="top"><img src="./img/blank.gif" alt="[ICO]"></th>
        <th><a href="http://localhost/?C=N;O=D">Name</a></th>
        <th><a href="http://localhost/?C=M;O=A">Last modified</a></th>
        <th><a href="http://localhost/?C=S;O=A">Size</a></th>
        <th><a href="http://localhost/?C=D;O=A">Description</a></th>
      </tr>


<!--      <tr>-->
<!--        <td valign="top"><img src="./img/folder.gif" alt="[DIR]"></td>-->
<!--        <td><a href="">201805/</a> </td>-->
<!--        <td align="right">2018-06-21 17:13 </td>-->
<!--        <td align="right"> - </td>-->
<!--        <td>&nbsp;</td>-->
<!--      </tr>-->


    </tbody>
  </table>
  <address>Apache/2.4.33 (Win32) OpenSSL/1.1.0g PHP/7.2.4 Server at localhost Port 80</address>

</body>
<script>
  // 原生的ajax请求
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if (request.readyState === 4) {
      // json转数组
      var data = JSON.parse(request.responseText)
      console.log(data)
      var str = ''
      for (var i = 0; i < data.length; i++) {
        // str += '<tr><td valign="top"><img src="./img/folder.gif" alt="[DIR]"></td><td><a href="">' + data[i] + '</a></td></tr>';
        str +=  '<tr>';
        if (data[i].type === 'd') {
          // 文件
          str += '<td valign="top"><img src="./img/folder.gif" alt="[DIR]"></td>'
        } else {
          str += '<td valign="top"><img src="./img/text.gif" alt="[DIR]"></td>'
        }
        str += '<td><a href="">' + data[i].name + '/</a> </td>'
        str += '<td align="right">' + data[i].mtime + '</td>'
        str += '<td align="right">' + data[i].size + '</td>'
        str += '<td>&nbsp;</td>'
        str += '</tr>';
      }
      console.log(str)
      document.getElementsByTagName('tbody')[0].innerHTML += str;
    }
  };
  request.open('get', 'fileList');
  request.send();
  /*
  * 关于json的注意事项：
  * 1 - json是一个字符串，
  * 2 - 键必须使用双引号引起来
  * 3 - 键与值之间必须使用冒号连接起来
  * 4 - 每个键值对必须要用逗号进行隔开
  * 5 - 最后一个键值对不加逗号
  * 6 - 字符串转json就相当于序列化，反之对应的是反序列化
  * */
</script>
</html>